$fillClose
  &:hover
    color white !important
    background #888 !important

$fillDivide
  background white !important

defaultDivide(args)
  background args

$dotNoneShow
  color #888 !important
  border 0px !important
  background transparent !important
  padding 0px 2px !important
  .ani-tag-close
    display none
  .tag-divide
    display none
  &:hover
    opacity .8

tag()
  display inline-block
  border 1px solid #ccc
  border-radius 4px
  // padding 0px 10px
  font-size 12px
  color #888
  white-space nowrap
  background rgba(242, 242, 242, .5)
  // height 32px
  // line-height 32px
  padding 0px 10px
  height 28px
  line-height 28px
  // cursor pointer

.cursor-pointer
  cursor pointer
.cursor-default
  cursor default

.ani-tag
  tag()
  // 关闭图标
  .ani-tag-close
    margin-left 6px
    font-size 14px
    border-radius 50%
    padding 2px
    cursor pointer
    width 12px
    text-align center
    transition transform .2s linear
    &:hover
      transform rotate(90deg)
// 边框样式
.tag-border-solid
  border-style solid
.tag-border-dashed
  border-style dashed
.tag-border-dotted
  border-style dotted
// 标签尺寸
.ani-tag-mini
  padding 0px 5px
  height 20px
  line-height 20px
.ani-tag-small
  padding 0px 8px
  height 24px
  line-height 24px
.ani-tag-large
  padding 0px 10px
  height 32px
  line-height 32px
// 标签类型
.ani-tag-info
  background rgba(64, 158, 255, 0.1)
  border-color rgba(64, 158, 255, 0.2)
  color #409EFF
  .tag-divide
    defaultDivide(rgba(64, 158, 255, 0.2))
.ani-tag-success
  background rgba(103, 194, 58, 0.1)
  border-color rgba(103, 194, 58, 0.2)
  color #67c23a
  .tag-divide
    defaultDivide(rgba(103, 194, 58, 0.2))
.ani-tag-warn
  background rgba(230, 162, 60, 0.1)
  border-color rgba(230, 162, 60, 0.2)
  color #e6a23c
  .tag-divide
    defaultDivide(rgba(230, 162, 60, 0.2))
.ani-tag-danger
  background rgba(245, 108, 108, 0.1)
  border-color rgba(245, 108, 108, 0.2)
  color #f56c6c
  .tag-divide
    defaultDivide(rgba(245, 108, 108, 0.2))
// 边框填充
.ani-tag-default-border
  border-color #7e8082
  .tag-divide
    defaultDivide(#7e8082)
.ani-tag-info-border
  border-color #409EFF
  .tag-divide
    defaultDivide(#409EFF)
.ani-tag-success-border
  border-color #67c23a
  .tag-divide
    defaultDivide(#67c23a)
.ani-tag-warn-border
  border-color #e6a23c
  .tag-divide
    defaultDivide(#e6a23c)
.ani-tag-danger-border
  border-color #f56c6c
  .tag-divide
    defaultDivide(#f56c6c)
// 背景填充
.ani-tag-default-fill
  background #a5b8cc
  color white
  .tag-divide
    @extends $fillDivide
.ani-tag-info-fill
  background #409EFF
  color white
  .tag-divide
    @extends $fillDivide
.ani-tag-success-fill
  background #67c23a
  color white
  .tag-divide
    @extends $fillDivide
.ani-tag-warn-fill
  background #e6a23c
  color white
  .tag-divide
    @extends $fillDivide
.ani-tag-danger-fill
  background #f56c6c
  color white
  .tag-divide
    @extends $fillDivide
// 分割线
.tag-divide
  display inline-block
  width 1px
  height 100%
  margin-left 8px
  margin-right -2px
  vertical-align middle
  background #ccc
  margin-top -1px
// 简约
.tag-dot-default
  display inline-block
  border-radius 50%
  width 12px
  height 12px
  vertical-align text-top
  margin-right 6px
  .tag-dot-inner
    display block
    border-radius 50%
    width 6px
    height 6px
    margin auto
    margin-top 3px
.tag-dot-solid
  display inline-block
  border-radius 50%
  width 10px
  height 10px
  vertical-align text-top
  margin-right 2px
  margin-top 1px
  margin-left 2px
.tag-dot-hollow
  display inline-block
  border-radius 50%
  width 12px
  height 12px
  vertical-align text-top
  margin-right 2px
  .tag-dot-inner
    display block
    border-radius 50%
    width 4px
    height 4px
    margin auto
    margin-top 4px
    background white
.ani-tag-default-dot
  @extends $dotNoneShow
  .tag-dot-default
    background rgba(165, 184, 204, .3)
    .tag-dot-inner
      background #a5b8cc
  .tag-dot-solid
    background #a5b8cc
  .tag-dot-hollow
    background #a5b8cc
.ani-tag-info-dot
  @extends $dotNoneShow
  .tag-dot-default
    background rgba(64, 158, 255, .3)
    .tag-dot-inner
      background #409eff
  .tag-dot-solid
    background #409eff
  .tag-dot-hollow
    background #409eff
.ani-tag-success-dot
  @extends $dotNoneShow
  .tag-dot-default
    background rgba(103, 194, 58, .3)
    .tag-dot-inner
      background #67c23a
  .tag-dot-solid
    background #67c23a
  .tag-dot-hollow
    background #67c23a
.ani-tag-warn-dot
  @extends $dotNoneShow
  .tag-dot-default
    background rgba(230, 162, 30, .3)
    .tag-dot-inner
      background #e6a23c
  .tag-dot-solid
    background #e6a23c
  .tag-dot-hollow
    background #e6a23c
.ani-tag-danger-dot
  @extends $dotNoneShow
  .tag-dot-default
    background rgba(245, 108, 108, .3)
    .tag-dot-inner
      background #f56c6c
  .tag-dot-solid
    background #f56c6c
  .tag-dot-hollow
    background #f56c6c
// 圆角
.ani-tag-round
  border-radius 20px
